/* stylelint-disable scss/operator-no-newline-after */
@include b(bi-filter-condition) {
  height: 100%;
  font-size: getCssVar('font-size', 'regular');
  @include e('filter-number') {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: getCssVar(spacing, base);
    background-color: getCssVar(color, fill, 0);
  }
  @include m(disabled) {
    @include b(bi-filter-condition-item) {
      @include e(btn) {
        cursor: not-allowed;

        &:hover {
          background-color: transparent;

          svg {
            fill: getCssVar(color, text, 3);
          }
        }
      }
    }

    @include b(bi-filter-condition-footer-btn) {
      cursor: not-allowed;

      &:hover {
        @include e(text) {
          text-decoration: none;
        }
      }
    }
  }
}

@include b(bi-filter-condition-content) {
  @include when('border-mode') {
    border: 1px solid getCssVar(color, border);
    border-radius: getCssVar(border-radius, small);
    .#{bem('bi-filter-condition-item')} {
      padding: 0 getCssVar(spacing, base);
      margin-top: getCssVar(spacing, base);
    }
  }
}

@include b(bi-filter-condition-item) {
  display: flex;
  align-items: center;
  margin-bottom: getCssVar('spacing', 'base');

  @include e(connection) {
    flex: 0 0 10%;

    @include m(init) {
      padding-left: calc(
        getCssVar('spacing', 'base-tight') -
          (getCssVar('spacing', 'super-tight') / 2)
      );
    }
  }

  @include e(field) {
    flex: 0 0 30%;
    margin-right: getCssVar('spacing', 'base-tight');
  }

  @include e(valueOP) {
    flex: 0 0 30%;
    margin-right: getCssVar('spacing', 'base-tight');
  }

  @include e(editor) {
    flex: 1 1 0;
  }

  @include e(btn) {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: getCssVar('spacing', 'tight');
    cursor: pointer;
    border-radius: getCssVar(border, radius, small);

    svg {
      fill: getCssVar(color, text, 3);
    }

    &:hover {
      background-color: getCssVar(color, danger, light, default);

      svg {
        fill: getCssVar(color, danger, hover);
      }
    }
  }
}

@include b(bi-filter-condition-item-content) {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
  margin: 0 getCssVar('spacing', 'base-tight');
}

@include b(bi-filter-condition-footer) {
  display: flex;
  align-items: center;
  @include when('border-mode') {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: getCssVar(spacing, base);
    text-align: center;
    border: 1px solid getCssVar(color, border);
    border-radius: getCssVar(border-radius, small);
  }
}

@include b(bi-filter-condition-footer-btn) {
  display: flex;
  align-items: center;
  color: getCssVar(color, primary);
  cursor: pointer;

  @include e(icon) {
    margin-right: getCssVar('spacing', 'extra-tight');
    fill: getCssVar(color, primary);
  }

  &:hover {
    @include e(text) {
      text-decoration: underline;
    }
  }
}
